<template>
  <view>
    <uni-nav-bar dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF" status-bar title="总资产"
      left-icon="left" @clickLeft="back" />
    <view class="content">
      <view class="top_content">
        <view class="top_content_text">
          您的总资产
        </view>
        <view class="top_content_value">
          {{all_assets}}
        </view>
      </view>
      <view class="bottom_content" v-for="(item,index) in list" :key="index">
        <view class="bottom_con_textone">
          ￥{{item.new_price}}/
        </view>
        <view class="bottom_con_texttwo">
          价值
        </view>
        <view class="bottom_con_textthree">
          {{item.name}}
        </view>
        <view class="bottom_con_four">

        </view>
        <view class="bottom_con_five">
          <view class="bottom_con_six">
            {{item.create_time.split(' ')[0]}}
          </view>
          <view class="bottom_con_seven">
             {{item.create_time.split(' ')[1]}}
          </view>
          <view class="bottom_con_eight">

          </view>
          <view class="bottom_con_nine">
            {{item.less_days}}天
          </view>
          <view class="bottom_con_ten">

          </view>
          <view class="bottom_con_eleven">
            {{item.end_time.split(' ')[0]}}
          </view>
          <view class="bottom_con_twelve">
            {{item.end_time.split(' ')[1]}}
          </view>
          <view class="bottom_con_thirteen">
            开始时间
          </view>
          <view class="bottom_con_fourteen">
            结束时间
          </view>
        </view>
        <view class="bottom_con_fifteen">
          {{ item.status | fixStatus }}
        </view>
        <view class="bottom_con_sixteen">
          利润
        </view>
        <view class="bottom_con_seventeen">
          ￥{{item.profit}}
        </view>
        <view class="bottom_con_eighteen">
          收益率
        </view>
        <view class="bottom_con_nineteen">
          {{item.rate}}
        </view>
      </view>

    </view>
  </view>
</template>

<script>
  import {
    getAssetsIndex
  } from '../../../api/index.js'
  export default {
    data() {
      return {
        all_assets: '',
        page: 1,
        list:[]
      }
    },
    filters: {
      fixTitle(type) {
        return type === 'admin' ? '账户选择' : type === 'pet' ? '宠物选择' : '请选择'
      },
      fixStatus(status) {
        return status === 1 ? '增值中' : status === 2 ? '待转让' : status === 3 ? '转让中' : ''
      }
    },
    methods: {
      back() {
        uni.navigateBack()
      },
      getList() {
        getAssetsIndex({
          page:this.page
        }).then(res => {
          if (res.code == 1) {
            this.all_assets = res.data.user.all_assets
            this.list = res.data.list
            console.log(res);
            console.log(this.list, 123);
          }
        })
      }
    },
    onLoad() {
      this.getList()
    }
  }
</script>

<style scoped lang="less">
  .content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0 auto;

    .top_content {
      width: 686rpx;
      height: 289rpx;
      margin: 0 auto;
      margin-top: 30rpx;
      background-image: url('@/static/mine/assets/lottery_bg.png');
      background-size: cover;
      background-repeat: no-repeat;
      overflow: hidden;

      .top_content_text {
        text-align: center;
        margin-top: 106rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }

      .top_content_value {
        text-align: center;
        margin-bottom: 103rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFD76B;
      }
    }

    .bottom_content {
      width: 680rpx;
      height: 260rpx;
      background: #FFFFFF;
      box-shadow: 4rpx 1rpx 20rpx 1rpx rgba(0, 0, 0, 0.11);
      border-radius: 10rpx;
      margin: 0 auto;
      margin-top: 36rpx;
      position: relative;

      .bottom_con_textone {
        position: absolute;
        top: 18rpx;
        right: 214rpx;
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #E0AC5E;
      }

      .bottom_con_texttwo {
        position: absolute;
        top: 18rpx;
        right: 134rpx;
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
      }

      .bottom_con_textthree {
        position: absolute;
        top: 18rpx;
        right: 24rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #E0AC5E;
      }

      .bottom_con_four {
        position: absolute;
        top: 59rpx;
        left: 0;
        width: 199rpx;
        height: 152rpx;
        background-image: url('@/static/mine/assets/temp_bg1.png');
        background-size: cover;
        background-repeat: no-repeat;
      }

      .bottom_con_five {
        width: 450rpx;
        height: 140rpx;
        position: absolute;
        top: 56rpx;
        right: 23rpx;
        background: #F4F4F4;
        border-radius: 10rpx;

        .bottom_con_six {
          position: absolute;
          top: 29rpx;
          left: 22rpx;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
        }

        .bottom_con_seven {
          position: absolute;
          top: 40rpx;
          left: 94rpx;
          font-size: 20rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #666666;
        }

        .bottom_con_eight {
          width: 33rpx;
          height: 0rpx;
          background: #F4F4F4;
          border: 1rpx solid #666666;
          position: absolute;
          top: 47rpx;
          left: 165rpx;
        }

        .bottom_con_nine {
          width: 54rpx;
          height: 28rpx;
          border: 1rpx solid #666666;
          border-radius: 14rpx;
          position: absolute;
          top: 34rpx;
          left: 198rpx;
          text-align: center;
          line-height: 28rpx;
          font-size: 20rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
        }

        .bottom_con_ten {
          width: 33rpx;
          height: 0rpx;
          background: #F4F4F4;
          border: 1rpx solid #666666;
          position: absolute;
          top: 47rpx;
          left: 254rpx;
        }

        .bottom_con_eleven {
          position: absolute;
          top: 29rpx;
          left: 305rpx;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
        }

        .bottom_con_twelve {
          position: absolute;
          top: 40rpx;
          left: 378rpx;
          font-size: 20rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #666666;
        }

        .bottom_con_thirteen {
          position: absolute;
          top: 87rpx;
          left: 22rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
        }

        .bottom_con_fourteen {
          position: absolute;
          top: 87rpx;
          left: 304rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
        }
      }

      .bottom_con_fifteen {
        position: absolute;
        bottom: 24rpx;
        left: 36rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #E65F5F;
      }

      .bottom_con_sixteen {
        position: absolute;
        bottom: 24rpx;
        left: 207rpx;
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #666666;
      }

      .bottom_con_seventeen {
        position: absolute;
        bottom: 24rpx;
        left: 264rpx;
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #E0AC5E;
      }

      .bottom_con_eighteen {
        position: absolute;
        bottom: 24rpx;
        right: 160rpx;
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #666666;
      }

      .bottom_con_nineteen {
        position: absolute;
        bottom: 24rpx;
        right: 27rpx;
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #E0AC5E;
      }
    }
  }
</style>
